<template>
    <!-- 
          需求分析
             1 请求用户的购物车列表数据
             2 计算出所有商品的总数量
             3 切换单个商品的选中状态
             4 修改单个商品的数量
             5 删除单个商品
             6 切换所有商品的选中状态
             7 添加订单
             8 获取推荐商品列表，上拉加载下一页
             9 下拉刷新购物车和商品列表
        -->
    <!-- 顶部导航 -->
    <van-nav-bar :title="`购物车(${total})`" left-text="返回" left-arrow @click-left="$router.back()" />

    <!-- 无商品时候 -->
    <van-empty description="购物车无商品" v-if="list.length<=0">
        <van-button round type="danger" class="bottom-button" @click="$router.push('/')">立即购物</van-button>
    </van-empty>

    <!-- 有商品 -->
    <div class="cart-content" v-else>
        <van-swipe-cell v-for="item in list" :key="item.cartid">
            <div class="item">
            <!-- 复选框 -->
            <van-checkbox v-model="item.falg" checked-color="#ee0a24"></van-checkbox>

            <van-card :price="item.originprice" :title="item.proname" class="goods-card" :thumb="item.img1">
                <template #num>
                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </div>

    <!-- 分割线 -->
    <van-divider>可能你还想要</van-divider>

    <!-- 商品列表 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <GoodsList :goodslist='goodslist' />
    </van-list>

    <!-- 提交订单 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" checked-color="#ee0a24">全选</van-checkbox>
    </van-submit-bar>

    <!-- 底部导航栏 -->
    <HomeFooter />
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue';
import { cartlist, selectall } from '@/apis/cart'
import { useUserStore } from '@/store/userStore';
import { computed } from '@vue/reactivity';
const user=useUserStore()
const value = ref('2')

//渲染购物车列表
const list = ref([])
const showCartlist = () => {
    cartlist(user.userid)
        .then(res => {
        list.value=res.data
    })
}
onMounted(() => {
    showCartlist()
})

//计算所有商品的总数量
const total = computed(() => {
    let sum = 0
    list.value.forEach(item => sum += item.num)
    return sum
})

    // / 全选按钮是否选中
const checked = computed({
    get() {
        return list.value.every(item => item.flag == true)
    },
    set(value: boolean) {
        // 调用接口，切换所有商品的选中状态，然后重新请求购物车数据
        selectall(user.userid, value)
            .then(() => {
                showCartlist()
            })
    }
})

//商品列表的上拉加载下一页
// 是否转圈圈
const loading = ref(false)
//是否到底了
const finished = ref(true)
//触底要执行的函数
const onLoad = function () {
    console.log('触底了');

}
//提交订单
const onSubmit = () => {
    console.log('提交订单');
    
}
//请求推荐的商品数据
const goodslist = []
</script>

<style scoped lang="scss">
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.cart {
    padding-bottom: 50px;
}

.item {
    display: flex;

    .van-checkbox {
        width: 2em;
        box-sizing: border-box;
        padding-left: 5px;
    }

    .van-card {
        flex: 1;
    }
}

.van-submit-bar {
    bottom: 50px;
}
</style>
